import { useState } from 'react';
import { history } from 'umi';
import { Button, Input } from 'antd';
import ProCard from '@ant-design/pro-card';
import Recruiting from './Recruiting';
import Pause from './Pause';
import Recruited from './Recruited';
import Demand from './Demand';
import DemandForm from './Demand/DemandForm';
import styles from './index.less';
import InformationModal from '@/components/InformationModal';
import { PageHeaderWrapper } from '@ant-design/pro-layout';

const { Search } = Input;

export default () => {
  const [tab, setTab] = useState('tab1');
  const [visible, setVisible] = useState(false);
  const [confirmLoading, setConfirmLoading] = useState(false);
  const [modalText, setModalText] = useState('');
  const [showDemandForm, setShowDemandForm] = useState(false);

  const showModal = (num: number) => {
    if (num === 1)
      setModalText(
        '您确定暂停职位招聘吗？暂停后，可于暂停职位中查看及处理职位下的简历，但无法发起offer审批及发送offer；已接收的候选人不受影响。',
      );
    if (num === 2)
      setModalText('您确定关闭职位招聘吗？关闭后，将无法查看职位信息及已投递该职位的简历。');
    if (num === 3)
      setModalText(
        '您确定开启职位招聘吗？开启后，可于在招职位中查看及处理职位下的简历，可发起offer审批及发送offer。',
      );
    setVisible(true);
  };

  const handleOk = () => {
    setConfirmLoading(true);
    setTimeout(() => {
      setVisible(false);
      setConfirmLoading(false);
    }, 1000);
  };

  const onSearch = (value: any) => console.log(value);

  const extraButton = () => {
    return (
      <div className={styles.extraButton}>
        {!showDemandForm && (
          <Search
            placeholder="输入职位名称搜索职位"
            allowClear
            //   enterButton="Search"
            enterButton
            size="small"
            onSearch={onSearch}
            className={styles.btn}
          />
        )}

        {tab === 'tab1' && (
          <Button
            type="primary"
            className={styles.btn}
            size="small"
            onClick={() => {
              history.push('/recruitment/information/createposition');
            }}
          >
            创建
          </Button>
        )}
        {tab === 'tab1' && (
          <Button
            type="primary"
            ghost
            className={styles.btn}
            size="small"
            onClick={() => showModal(1)}
          >
            全部暂停
          </Button>
        )}
        {tab === 'tab2' && (
          <Button
            type="primary"
            ghost
            className={styles.btn}
            size="small"
            onClick={() => showModal(3)}
          >
            全部开启
          </Button>
        )}

        {(tab === 'tab1' || tab === 'tab2') && (
          <Button danger className={styles.btn} size="small" onClick={() => showModal(2)}>
            全部关闭
          </Button>
        )}

        {tab === 'tab4' && !showDemandForm && (
          <Button
            type="primary"
            className={styles.btn}
            size="small"
            onClick={() => {
              setShowDemandForm(true);
            }}
          >
            添加用人需求
          </Button>
        )}
      </div>
    );
  };

  return (
    <PageHeaderWrapper>
      <ProCard
        tabs={{
          tabPosition: 'top',
          activeKey: tab,
          onChange: (key) => {
            setTab(key);
          },
        }}
        style={{ position: 'absolute' }}
      >
        <ProCard.TabPane key="tab1" tab="在招职位">
          <Recruiting />
        </ProCard.TabPane>
        <ProCard.TabPane key="tab2" tab="暂停职位">
          <Pause />
        </ProCard.TabPane>
        <ProCard.TabPane key="tab3" tab="已招职位">
          <Recruited />
        </ProCard.TabPane>
        <ProCard.TabPane key="tab4" tab="用人需求">
          {showDemandForm ? (
            <DemandForm
              goBack={() => {
                setShowDemandForm(false);
              }}
            />
          ) : (
            <Demand />
          )}
        </ProCard.TabPane>
      </ProCard>
      {extraButton()}
      <InformationModal
        visible={visible}
        modalText={modalText}
        confirmLoading={confirmLoading}
        showModalBtn
        handleOk={() => handleOk()}
        onCancel={() => setVisible(false)}
      />
    </PageHeaderWrapper>
  );
};
